<script setup lang="ts">
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import HeadNewbar from './components/HeadNewbar.vue'
import XtxSwiper from '@/components/XtxSwiper.vue'
import XtcLike from '@/components/XtcLike.vue'
import CategroyPanel from './components/CategroyPanel.vue'
import HootPane from './components/HootPane.vue'
import { getHomeBanner, getHomeCategory, getHomeHost } from '@/services/home'
import { Result, Category } from '@/types/home.d.ts'

const list = ref<Result[]>([])
const categoryList = ref<Category[]>([])
const hostList = ref([])

const getHomeBannerData = async () => {
  const res = await getHomeBanner(1)
  list.value = res.result
}

const getHomeCategoryData = async () => {
  const res = await getHomeCategory()
  categoryList.value = res.result
}

const getHomeHostData = async () => {
  const res = await getHomeHost()
  hostList.value = res.result
}
onLoad(async () => {
  getHomeBannerData()
  getHomeCategoryData()
  getHomeHostData()
})

const guessRef = ref()
// 滚动触底
const onscrolltolower = () => {
  guessRef.value.getHomeGoodlike()
}
const isTriggerd = ref(false)
// 下拉刷新
const onrefresherrefresh = async () => {
  isTriggerd.value = true
  /*   await getHomeBannerData()
  await getHomeCategoryData()
  await getHomeHostData() */
  await Promise.all([
    getHomeBannerData(),
    getHomeCategoryData(),
    getHomeHostData(),
    guessRef.value.resetData(),
  ])

  isTriggerd.value = false
}
</script>

<!--  开启下拉刷新 -->
<template>
  <HeadNewbar />
  <scroll-view
    scroll-y
    class="scrollY"
    :refresher-triggered="isTriggerd"
    @refresherrefresh="onrefresherrefresh"
    @scrolltolower="onscrolltolower"
    refresher-enabled
  >
    <XtxSwiper :list="list" />
    <CategroyPanel :list="categoryList"></CategroyPanel>
    <HootPane :list="hostList"></HootPane>
    <XtcLike ref="guessRef"></XtcLike>
  </scroll-view>
</template>

<style lang="scss" scoped>
//
page {
  background-color: #f7f7f7;
  display: flex;
  height: 100%;
  flex-direction: column;
}
.scrollY {
  flex: 1;
}
</style>
